<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var reg= /[a-zA-Z]+/;
        var re = /^[0-9]+.?[0-9]*$/;
        function f() {
            var m = document.getElementById('mm').value;
            var sl = 0;
            var mm = m.split("");
            for (var i = 0; i < mm.length; i++) {
                if (re.test(mm[i])){
                    sl+=1;
                } else if (reg.test(mm[i])){
                    sl+=2;
                } else {
                    sl+=3;
                }
            }
            if (sl<6){
                document.getElementById('qd').style.color = "red";
                document.getElementById("qd").innerText = "不符合标准";
            }else if (sl>=6 && sl<10){
                document.getElementById('qd').style.color = "salmon";
                document.getElementById("qd").innerText = "弱";
            } else if (sl>=10&&sl<15){
                document.getElementById('qd').style.color = "yellow";
                document.getElementById("qd").innerText = "中";
            } else if (sl>=15){
                document.getElementById('qd').style.color = "chartreuse";
                document.getElementById("qd").innerText = "强";
            }
        }
    </script>
</head>
<body>
    <h2>密码强度实时验证</h2>
    <input type="password" id="mm" onkeyup="f()"><font id="qd"></font>
</body>
</html>